<template>
  <div id="app">
    <!-- 顶部模块 -->
    <Tobar :key="topbarKey"></Tobar>

    <!-- 头部模块 -->
    <Header></Header>
    <router-view @updateTopBarKey='updateKeyFn'/>
    <!-- 底部模块 -->
    <Footer></Footer>

    <!-- 登录框 -->
    <!-- 需要一个状态控制login是否显示该状态多个组件都需要使用到 因此存储在vuex中 -->
    <Login v-show="isShowLoginModal"></Login>
    <transition>
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import Tobar from "./components/Topbar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

// 引入字体样式组件
import Toast from "@/components/Toast.vue";

// 导入登录框
import Login from "./components/Login.vue";

// import axios from 'axios'
import { JingpinAPI,UserProfilesAPI } from "./request/api";

// 导入显示隐藏辅助函数
import { mapState } from "vuex";

export default {
  components: {
    Tobar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topbarKey: 0,
    };
  },
  computed: {
    ...mapState({
      // 登录框显示隐藏
      // 属性：state => state.模块名称.属性名
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,

      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  async created() {
    // 缺点:
    //  1.服务器url 地址都一样,每个组件调用是都需要复制过去, ---request
    //    一旦接口地址发生变化,所有调用了接口的组件都需要修改 ---统一接口管理api.js
    //  2.每次请求时都需要手动编写config 携带token (多个组件携带代码重复) ----拦截器
    //  3. 优化then()写法,async + await

    // axios.get('/products/recommend').then()
    // JingpinAPI().then((res) => {
    //   console.log(res); // 在network中看,请求地址,响应结果
    // });
    let res = await JingpinAPI();
    // console.log("res3:", res);

    console.log('配置值为',process.env.VUE_APP_BASE_URL);
    console.log('配置值为',process.env.VUE_APP_MY_TEXT);
  },
  watch:{
    '$route.path':{
      handler(newVal,oldVal){
        if(newVal != oldVal){
          this.topbarKey++;
        }
      }
    }
  },
  methods:{
    updateKeyFn(){
      console.log('App.vue updateKeyFn');
      this.topbarKey++
    }
  }
};
</script>



<style lang="less">
#app {
  /* 入场的起始状态 = 离场的结束状态 */
  .slide-enter,
  .slide-leave-to {
    opacity: 0;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: opacity 0.3s linear;
  }

  .slide-enter-to,
  .slide-leave {
    opacity: 1;
  }
}
</style>
